import { defineComponent, type SetupContext, type CSSProperties } from "vue";
import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline";
import type { IconProps } from "@iconify/vue";

// Iconify Icon在Vue里本地使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html
export default defineComponent({
  name: "IconifyIconOffline",
  components: { IconifyIcon },
  setup(props: IconProps, { attrs }: SetupContext) {
    return () => {
      const { icon } = props;

      if (typeof icon === "object") addIcon(icon.body, icon);
      const reStyle = (attrs as unknown as IconProps)?.style
        ? Object.assign(attrs.style as CSSProperties, {
            outline: "none",
          })
        : { outline: "none" };

      return (
        <IconifyIcon icon={icon} style={reStyle}>
          {{
            /* 默认插槽 */
            default: () => [],
          }}
        </IconifyIcon>
      );
    };
  },
});
